import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue') // pinia store 示例
  },
  {
    path: '/userlist',
    name: 'userlist',
    component: () => import('../views/UserList.vue') // axios 示例
  },
  // 用户相关路由
  {
    path: '/user',
    name: 'user',
    component: () => import('../views/User/Index.vue'),
    children: [
      {
        path: 'list',
        component: () => import('../views/User/List.vue')
      },
      {
        path: 'detail/:id',
        component: () => import('../views/User/Detail.vue')
      }
    ]
  },
  // 权限相关路由
  {
    path: '/admin',
    name: 'admin',
    meta: { requiresAuth: true },  // 路由元信息
    component: () => import('../views/Admin.vue')
  },
  // 带懒加载的嵌套路由示例
  // 当访问 /settings 时，Settings.vue 组件将被加载
  // 当访问 /settings/profile 时，Profile.vue 组件将被加载
  // 当访问 /settings/security 时，Security.vue 组件将被加载
  // 注意：子路由的路径是相对于父路由的路径的
  {
    path: '/settings',
    component: () => import('../views/Settings.vue'),
    children: [
      {
        path: 'profile',
        component: () => import('../views/settings/Profile.vue')
      },
      {
        path: 'security',
        component: () => import('../views/settings/Security.vue')
      }
    ]
  },
  // 404页面路由（放在最后）
  // 匹配所有路径并将它们重定向到NotFound组件
  // 确保此路由定义在所有其他路由定义之后
  // 这是因为Vue Router使用“从上到下”的顺序来匹配路由
  // 因此，如果此路由在其他路由之前定义，它将永远无法匹配任何路径
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../views/NotFound.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router